<template>
  <div class="edit container">
       <Alert v-if="alert" :msg="alert"></Alert>
      <h1 class="page-header">编辑用户信息</h1>
      <form  v-on:submit="upadteaddCus">
        <div class="well">
                <h4>用户信息</h4>
                <div class="form-group">
                    <label> 姓名: </label>
                    <input type="text" class="form-control" placeholder="姓名" v-model="customer.name">
                </div>
                <div class="form-group">
                    <label> 电话: </label>
                    <input type="text" class="form-control" placeholder="手机号" v-model="customer.phone">
                </div>
                <div class="form-group">
                    <label> 邮箱: </label>
                    <input type="text" class="form-control" placeholder="电子邮箱" v-model="customer.email">
                </div>
                <div class="form-group">
                    <label> 年龄: </label>
                    <input type="text" class="form-control" placeholder="年龄" v-model="customer.age">
                </div>
               
                <!-- <div class="form-group">
                    <label> 简介: </label>
                    <textarea class="form-control" rows="10" v-model="customer.profile"></textarea>
                </div> -->

                <button type="submit" class="btn btn-primary">确认</button>
            </div>
      </form>
  </div>
</template>

<script>
import Alert from './Alert'
export default {
  name: 'add',
  data () {
    return {
        customer:{}
    }
  },
   components:{
      Alert
  },
  methods:{
      fetchCus(id){
          this.$http.get("http://localhost:3000/users/"+id)
          .then(function(response){
           this.customer = response.body;
          })
      },
     upadteaddCus(e){
        //  console.log(123)
        if (!this.customer.name || !this.customer.phone || !this.customer.email){
              this.alert ="请输入正确信息"
        }else{
            let updatenewCust = {
                name:this.customer.name,
               phone:this.customer.phone,
                email:this.customer.email,
                age:this.customer.age
            }
            
            this.$http.put("http://localhost:3000/users/"+this.$route.params.id,updatenewCust)
            .then(function(response){
               this.$router.push({path:"/",query:{alert:"用户更新成功！"}});
            })
             e.preventDefault();
        }
        e.preventDefault();
      }
  },
   created(){
      this.fetchCus(this.$route.params.id);

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
